<template>
    <div class="right-menu">

        <div class="menus">

            <q-card-media v-for="(item,index) in items" :key="index" class="item" color="light">
                <img class="img" :src="item.image" alt="img">
                <q-card-title class="overlay" slot="overlay">
                    <span v-text="item.title"></span>
                    <q-btn class="enter-btn" @click="$router.push(item.link)">Enter</q-btn>
                </q-card-title>
            </q-card-media>

        </div>

    </div>
</template>

<script type="text/ecmascript-6">
  import images from "./images";

  /**
   * @author 白雨浓
   * @date 2019/1/10 10:09
   *
   * 右侧菜单
   **/
  export default {
    name: 'RightMenu',
    data() {
      return {
        items: [
          {title: 'Entity->JSON', link: '/entity2json', image: images[0]},
          {title: 'JSON->Element', link: '/JSON2Element', image: images[1]},
          {title: 'TEST', link: '/test', image: images[2]},
          {title: 'TEST', link: '/test', image: images[3]},
          {title: 'TEST', link: '/test', image: images[4]},
          {title: 'SETTING', link: '/setting', image: require('../../assets/menu/setting.png')},
        ]
      }
    },
    mounted() {
      this.$nextTick(() => {
      })
    },
    methods: {}
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .right-menu {
        padding 20px
        user-select none
    }

    .menus {
        width 100%
        height calc(100vh - 70px)
        margin auto
        overflow auto
    }

    .overlay {
        display flex
        justify-content space-between
        align-items center
        height 50px
        padding 0 20px
    }

    .item {
        display inline-block
        width 260px
        height 150px
        margin 10px
        border-radius 3px
    }

    .img {
        background-repeat no-repeat
        background-size cover
        background-position center
    }

    .enter-btn {
        float right
    }
</style>
